<template>
    <div class="outside">

        <transition
        appear
        name="custom-classes-transition"
        enter-active-class="animate__animated animate__faster  animate__fadeInRight"
        leave-active-class="animate__animated animate__faster animate__fadeOutRight"
        >
            <div class="left">
                <button @click="socketSend">摄像头_02</button>
            </div>
        </transition>

        <div class="right"></div>

    </div>
</template>

<script setup>
import { showTopic } from '../../apis/configs/build'
const socketSend = async () => {
    let info = {
        toguys: 'thing',
        data: {
            eventName: 'camera',
            data: {
                id: '摄像头02'
            }

        }
    }


    await showTopic(info)
}
</script>

<style lang="scss" scoped>
.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 100vh;
    display: flex;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);

    button {
        width: 150px;
        height: 50px;
        color: white;
        background-color: rgb(30, 128, 255);
        border: none;
        border-radius: 10px;
        cursor: pointer;
    }

}


.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 50vh;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
}
</style>